<!--策略启动-自定义-->
<template>
  <div class="all" @viewappear="viewappear" @viewdisappear="viewdisappear">
    
    <scroller class="scroller">
      <div class="wrapper">
        
        <VPInput class="cell" v-model="name" 
        :title="T('信号名称')" :placeholder="T('请输入信号名称')" type="text" />
        
        <VPInput class="cell" v-model="time" 
        :title="T('有效期')" :placeholder="T('请输入有效期')" unit="S"/>
        
        <VPTextarea class="cell" v-model="remark" 
        :title="T('备注')" :placeholder="T('请输入内容')" />

    
        <VPSlot v-if="config" class="cell"  :title="T('Webhook URL')">
          <div class="url all">
            <text class="font22 text1 all text-line1">{{config.webhookUrl}}</text>
            <div class="url-copy main-b1" @click="copyClick(config.webhookUrl)">
              <text class="font24 main-t1">{{T('复制')}}</text>
            </div>
          </div>
        </VPSlot>
        
        <div class="tipe bg2">
          <text class="font28 text2">{{T('如何使用TradingView自定义信号：')}}</text>
          <text class="font28 text2">{{T('①启动策略时，选择使用TradingView自定义信号')}}</text>
          <text class="font28 text2">{{T('②打开TradingView设置的信号警报')}}</text>
          <text class="font28 text2">{{T('③配置Webhook URL，将URL地址复制填入到TradingView中')}}</text>
          <text class="font28 text2">{{T('④创建完成后，等待策略接收信号启动。')}}</text>

          <text class="font28 main-t1" style="margin-top: 40px;"
          @click="urlClick">{{T('详细教程')}}>></text>
        </div>
      </div>
    </scroller>

    <!--启动-->
    <div class="up bg3">
      <div class="up-but main1" @click="addClick">
        <text class="font32 text1">{{T('创建信号')}}</text>
      </div>
    </div>
  </div>
</template>

<script>

//功能
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jnavigator from "@/_js/navigator"; 
import jbroadcast from "@/_js/broadcast";
import jhttps from "@/_js/https";

const weexFunction = weex.requireModule('WeexFunction');
const clipboard = weex.requireModule("clipboard");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('TradingView自定义'));

//组件
import VPInput from "@/_public/VPInput.vue";
import VPTextarea from "@/_public/VPTextarea.vue";
import VPSlot from "@/_public/VPSlot.vue";

export default {

  components: {
    VPInput,
    VPTextarea,
    VPSlot
  },
  
  data() {
    return {
      T:T,
      url: 'https://note.youdao.com/s/B6KumGr7',

      name:'', //信号名称
      time:'', //有效期
      remark:'', //备注
      
      config:undefined,
    };
  },

  mounted() {
    this.httpsGetWebhookUrl();
  },
  
  computed: {
  },

  methods: {

    /*************************************************通信触发*/
    //完全显示
    viewappear() {
    },

    //完全隐藏
    viewdisappear() {
    },

    /********************************************** https*/
    
    //https 获取weburl
    httpsGetWebhookUrl(){

      jmodal.showLoad();
      var param = {};    
      jhttps.post("signal/getWebhookUrl",param,true,(data)=>{

        jmodal.hideLoad();
        if(data.status == 200){
          this.config = data.data;
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //https 创建信号
    httpsCreateTradingViewSignal(){

      jmodal.showLoad();
      var param = {'signalName': this.name, //信号名称
                    'expireTime':Number(this.time),
                    'remark':this.remark,
                    ...this.config}
      jhttps.postX("signal/createTradingViewSignal",param,true,(data)=>{

        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast('创建成功');
          jbroadcast.send('SignalAdd');
          jnavigator.back();
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************** 点击*/
    //复制url
    copyClick(url) {
      clipboard.setString(url);
      jmodal.toast(T('复制成功'));
    },

    //教程点击
    urlClick() {
        weexFunction.showWebUrl(this.url);
    },
    
    //创建信号
    addClick() {
      
      var name = this.name.replace(/\s/g, '');
      if (!name) {
        jmodal.toast(T('请输入信号名称'));
        return;
      }

      if (!this.time) {
        jmodal.toast(T('请输入有效期'));
        return;
      }

      var remark = this.remark.replace(/\s/g, '');
      if (!remark) {
        jmodal.toast(T('请输入备注'));
        return;
      }

      if (!this.config) {
        jmodal.toast(T('Webhook URL获取失败，开始重新获取。。。'));
        setTimeout(() => {
          this.httpsGetWebhookUrl();
        }, 1000);
        return;
      }

      this.httpsCreateTradingViewSignal();
    }
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.scroller {
  flex: 1;
}
.wrapper{
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
}
.cell {
  margin-top: 40px;
}

.url {
  flex-direction: row;
  align-items: center;
  height: 108px;
}
.url-copy {
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 48px;
  border-radius: 6px;
  border-width: 2px;
  margin-left: 60px;
}
/*************** 启动*/
.up{
  flex-direction: column;
  height: 164px;

  padding-left: 40px;
  padding-right: 40px;
}
.up-but{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 80px;
  border-radius: 4px;

  margin-top: 28px;
}
.tipe {
  border-radius: 12px;
  padding: 30px 40px;
  margin-top: 40px;
}
.font28{
  font-size: 28px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  line-height: 50px;
}
</style>